<template>
  <div>
    <bread>
      <h1>评审专家库</h1>
      <div class="pull-right">
        <el-button size="small" type="primary" @click="updateData(null)">添加专家</el-button>
      </div>
    </bread>
    <pageContent hasPagination is-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="全部">
          <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            header-row-class-name="custom-table-header">
            <template v-for="item in tableHead">
              <el-table-column
                :prop="item.en"
                :label="item.cn"
                :key="item.en"
                :width="getColumnWidth(item)">
              </el-table-column>
            </template>
            <el-table-column
              label="操作"
              width="160"
              fixed="right">
              <template slot-scope="scope">
                <el-button type="text" @click="updateData(scope.row)">修改资料</el-button>
                <el-button type="text" class="error" @click="deleteExpert">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="自科专家" name="自科">
          <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            header-row-class-name="custom-table-header">
            <template v-for="item in tableHead">
              <el-table-column
                :prop="item.en"
                :label="item.cn"
                :key="item.en"
                :width="getColumnWidth(item)">
              </el-table-column>
            </template>
            <el-table-column
              label="操作"
              width="160"
              fixed="right">
              <template slot-scope="scope">
                <el-button type="text" @click="updateData(scope.row)">修改资料</el-button>
                <el-button type="text" class="error" @click="deleteExpert">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="社科专家" name="社科">
          <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            header-row-class-name="custom-table-header">
            <template v-for="item in tableHead">
              <el-table-column
                :prop="item.en"
                :label="item.cn"
                :key="item.en"
                :width="getColumnWidth(item)">
              </el-table-column>
            </template>
            <el-table-column
              label="操作"
              width="160"
              fixed="right">
              <template slot-scope="scope">
                <el-button type="text" @click="updateData(scope.row)">修改资料</el-button>
                <el-button type="text" class="error" @click="deleteExpert">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="教改专家" name="教改">
          <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            header-row-class-name="custom-table-header">
            <template v-for="item in tableHead">
              <el-table-column
                :prop="item.en"
                :label="item.cn"
                :key="item.en"
                :width="getColumnWidth(item)">
              </el-table-column>
            </template>
            <el-table-column
              label="操作"
              width="160"
              fixed="right">
              <template slot-scope="scope">
                <el-button type="text" @click="updateData(scope.row)">修改资料</el-button>
                <el-button type="text" class="error" @click="deleteExpert">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </pageContent>
    <pagination
      :total="total"
      :page-size="pageSize"
      @changePage="fetchData">
    </pagination>

    <!-- 添加专家，修改专家资料 -->
    <el-dialog
      :title="dialogTitle"
      :visible="dialogFormVisible"
      class="expert-dialog"
      :close-on-click-modal="false"
      @close="resetForm('form')">
      <p>此处添加的专家可以在校级项目评审时直接邀请</p>
      <el-form :model="form" ref="form" :rules="rules" :inline="true" label-position="top">
        <el-form-item
          label="姓名"
          prop="name">
          <el-input v-model="form.name" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="分组" prop="resource">
          <el-select v-model="form.resource" placeholder="请选择专家类型">
            <el-option label="自科专家" value="自科"></el-option>
            <el-option label="社科专家" value="社科"></el-option>
            <el-option label="教改专家" value="教改"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="手机号"
          prop="mobile">
          <el-input v-model="form.mobile" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item
          label="邮箱"
          prop="email">
          <el-input
            v-model="form.email"
            auto-complete="off"
            placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="备注" class="desc">
          <el-input type="textarea" v-model="form.desc" placeholder="请输入" :rows="4"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('form')">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import pagination from 'components/pagination';
  import validate from 'util/validate';
  export default {
    data () {
      var validateMobile = (rule, value, callback) => {
        if (value && value.trim().length && !validate.isValid('mobile', value)) {
          return callback(new Error('请输入正确的手机号码'));
        }
        callback();
      };
      return {
        activeName: '全部',
        total: 1000,
        pageSize: 30,
        dialogFormVisible: false,
        dialogTitle: null,
        tableHead: [
          {
            cn: '姓名',
            en: 'name',
          },
          {
            cn: '分组',
            en: 'resource',
          },
          {
            cn: '手机号',
            en: 'mobile',
          },
          {
            cn: '邮箱',
            en: 'email',
          },
          {
            cn: '备注',
            en: 'desc',
          },
          {
            cn: '添加时间',
            en: 'time',
          },
          {
            cn: '参评次数',
            en: 'g',
          },
        ],
        tableData: [
          {
            name: '屈雅霜',
            email: 'w2143@126.com',
            mobile: '189 2314 1324',
            resource: '自科',
            desc: '院士',
            time: '1994-12-02',
            g: '10',
          },
          {
            name: '桑国权',
            email: 'wee@126.com',
            mobile: '189 0011 3121',
            resource: '社科',
            desc: '知名专家',
            time: '1234-56-78',
            g: '8'
          },
        ],
        form: {
          name: '',
          email: '',
          mobile: '',
          resource: '',
          desc: ''
        },
        formClone: null,
        rules: {
          name: [
            {required: true, message: '姓名不能为空'}
          ],
          resource: [
            {required: true, message: '请选择分组', trigger: 'change' }
          ],
          mobile: [
            { validator: validateMobile, trigger: 'blur' }
          ],
          email: [
            {type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur'}
          ]
        }
      }
    },
    created: function() {
      // this.formClone = this.$_$.extend(true, {}, this.from);
    },
    methods: {
      handleClick() {

      },
      getColumnWidth() {

      },
      fetchData() {

      },
      deleteExpert() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      updateData(data) {
        if (data) {
          this.form = data;
          this.dialogTitle = '修改资料';
        } else {
          this.form = {};
          this.dialogTitle = '添加专家';
          if (this.activeName != '全部') {
            this.form.resource = this.activeName;
          }
        }
        this.formClone = this.$_$.extend(true, {}, this.form);
        this.dialogFormVisible = true;
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.dialogFormVisible = false;
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.dialogFormVisible = false;
        this.$refs[formName].resetFields();
        this.form = this.formClone;
      }
    },
    components: {
      pagination
    }
  }
</script>
<style scoped lang="scss">
  .expert-dialog {
    .el-dialog__body {
      padding-top: 10px;
    }
    .el-form {
      font-size: 0;
    }
    .el-form-item {
      width: 50%;
      margin-right: 0;
      padding-right: 20px;
      &.desc {
        width: 100%;
      }
      .el-select {
        width: 100%;
      }
    }
  }
</style>
